<template>
	<el-container>
		<el-main class="nopadding">
			<el-card shadow="hover">
				<template v-slot:header>
					<div>
						<span>表单基本属性</span>
						<div style="float: right;font-size: 14px;cursor: pointer;font-weight: 500;color: #207ab7" @click="switchBaseShow">
							<el-icon style="font-size: 16px;top: 3px">
								<el-icon-caret-left v-if="!baseShow"/>
								<el-icon-caret-bottom v-else/>
							</el-icon>
							{{ baseShow ? '折叠' : '展开' }}
						</div>
					</div>
				</template>
				<el-form v-show="baseShow">
					<el-main>
						<el-row :gutter="20">
							<el-col :span="6" :offset="6">
								<el-form-item label="流水号" prop="runNumNo">
									<el-input v-model="form.runNumNo" placeholder="流水号" maxlength="80" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :lg="6">
								<el-form-item label="流程标题" prop="flowTitle">
									<el-input v-model="form.flowTitle" placeholder="流程标题" maxlength="80" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6" :offset="6">
								<el-form-item label="发起人" prop="createUser">
									<select-user-dialog v-model:accountId="form.createUser" :mode="false"/>
								</el-form-item>
							</el-col>
							<el-col :lg="6">
								<el-form-item label="查询范围" prop="queryRange">
									<el-select v-model="form.queryRange" style="width: 100%;">
										<el-option value="" label="请选择"></el-option>
										<el-option value="0" label="我发起的"></el-option>
										<el-option value="1" label="我经办的"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6" :offset="6">
								<el-form-item label="流程状态" prop="status">
									<el-select v-model="form.status" style="width: 100%;">
										<el-option value="" label="请选择"></el-option>
										<el-option value="0" label="进行中"></el-option>
										<el-option value="1" label="已办结"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :lg="6">
								<el-form-item label="附件名称" prop="publicAttach">
									<el-input v-model="form.publicAttach" placeholder="附件名称" maxlength="80" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6" :offset="6">
								<el-form-item label="开始时间" prop="createTime">
									<el-date-picker v-model="form.createTime" placeholder="开始时间" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :lg="6">
								<el-form-item label="结束时间" prop="endTime">
									<el-date-picker v-model="form.endTime" placeholder="结束时间" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					</el-main>
				</el-form>
			</el-card>

			<el-card>
				<template v-slot:header>
					<div>
						<span>表单字段列表</span>
						<div style="float: right;font-size: 14px;cursor: pointer;font-weight: 500;color: #207ab7" @click="switchFieldShow">
							<el-icon style="font-size: 16px;top: 3px">
								<el-icon-caret-left v-if="!fieldShow"/>
								<el-icon-caret-bottom v-else/>
							</el-icon>
							{{ fieldShow ? '折叠' : '展开' }}
						</div>
					</div>
				</template>
				<el-form v-show="fieldShow">
					<el-main>
						<el-row :gutter="20" v-for="item in fieldList" :key="item.id">
							<el-col :span="12" :offset="6">
								<el-form label-width="20%">
									<el-form-item :label="item.label">
										<el-select v-model="whereForm[item.id].opt" style="display: inline-block;width: 30%">
											<el-option v-for="opItem in optList" :key="opItem.value" :value="opItem.value" :label="opItem.label"></el-option>
										</el-select>
										<div style="display: inline-block;width: 50%">
											<el-date-picker v-if="item.elType=='date'" v-model="whereForm[item.id].val" :placeholder="item.label" type="date" value-format="YYYY-MM-DD"
															style="width: 100%;"></el-date-picker>
											<el-select v-else-if="item.elType=='select'||item.elType=='checkbox'||item.elType=='radio'" v-model="whereForm[item.id].val">
												<el-option v-for="opitem in JSON.parse(item.model)" :key="opitem.value" :label="opitem.label" :value="opitem.value"></el-option>
											</el-select>
											<el-input v-else v-model="whereForm[item.id].val" :placeholder="item.label" maxlength="80" clearable></el-input>
										</div>
									</el-form-item>
								</el-form>
							</el-col>

						</el-row>

					</el-main>
				</el-form>
			</el-card>

			<el-card>
				<template v-slot:header>
					<div>
						<span>统计报表选项</span>
						<div style="float: right;font-size: 14px;cursor: pointer;font-weight: 500;color: #207ab7" @click="switchReportShow">
							<el-icon style="font-size: 16px;top: 3px">
								<el-icon-caret-left v-if="!reportShow"/>
								<el-icon-caret-bottom v-else/>
							</el-icon>
							{{ reportShow ? '折叠' : '展开' }}
						</div>
					</div>
				</template>
				<el-form v-show="reportShow">
					<el-row :gutter="20">
						<el-col :span="12" :offset="6">
							<el-main style="text-align: center;">
								<el-transfer
									filterable
									:filter-method="filterMethod"
									filter-placeholder="请输入字段名称"
									:titles="['备选字段', '已选字段']"
									v-model="selectedField"
									target-order="push"
									:data="fieldListOption">
								</el-transfer>
							</el-main>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
			<el-main class="nopadding">
				<el-header>
					<div class="left-panel">
					</div>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-input v-model="form.keyword" placeholder="标题 / 摘要"></el-input>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</div>
					</div>
				</el-header>
				<scTable ref="table" :params="form" :apiObj="apiObj" row-key="runId" stripe remoteSort remoteFilter>
					<el-table-column label="#" type="index" width="50"></el-table-column>
					<el-table-column label="流水号" prop="id" width="80" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column label="流程标题" prop="flowTitle" width="300" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column label="紧急程序" prop="urgency" width="100">
						<template #default="scope">
							<el-tag v-if="scope.row.urgency==0" type="success">一般</el-tag>
							<el-tag v-else-if="scope.row.urgency==1" type="warning">紧急</el-tag>
							<el-tag v-else-if="scope.row.urgency==2" type="danger">加急</el-tag>
							<el-tag v-else type="info">未知</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="是否删除" prop="delFlag" width="100">
						<template #default="scope">
							<el-tag v-if="scope.row.delFlag==0" type="success">正常</el-tag>
							<el-tag v-else-if="scope.row.delFlag==1" type="warning">删除</el-tag>
							<el-tag v-else type="info">未知</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="参与人员" prop="opUserStr" width="300"></el-table-column>
					<el-table-column label="创建人" prop="createUser" width="100"></el-table-column>
					<el-table-column label="创建时间" prop="createTime" width="150"></el-table-column>
					<el-table-column label="操作" fixed="right" align="right" width="210">
						<template #default="scope">
							<el-button-group>
								<el-button text type="primary" size="small" @click="readBpmDetails(scope.row, scope.$index)">查看</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
			<el-footer style="padding-bottom: 20px">
				<div style="text-align: center;">
					<el-button type="primary" @click="queryBpmList">查询列表</el-button>
					<el-button type="info" @click="fileDownload">导出EXCEL</el-button>
					<el-button type="warning" @click="closeTas">返回</el-button>
				</div>
			</el-footer>
		</el-main>
	</el-container>

</template>
<script>
import selectUserDialog from "@/views/module/selectUserDialog";
import useTabs from '@/utils/useTabs'
export default {
	components: {
		selectUserDialog,
	},
	data() {
		return {
			apiObj: this.$API.bpm.bpmFormData.searchBpmListByAdv,
			baseShow: false,
			fieldShow: false,
			reportShow: false,
			fieldList: [],
			allFileList:[],
			fieldListOption: [
				{key: 'id', label: '流水号'},
				{key: 'run_id', label: '唯一标识'},
				{key: 'status', label: '流程状态'},
				{key: 'create_time', label: '开始时间'},
				{key: 'end_time', label: '结束时间'}],
			selectedField: [],
			optList: [
				{value: '0', label: '请选择'},
				{value: '1', label: '等于'},
				{value: '2', label: '大于'},
				{value: '3', label: '小于'},
				{value: '4', label: '大于等于'},
				{value: '5', label: '小于等于'},
				{value: '6', label: '不等于'},
				{value: '7', label: '开始为'},
				{value: '8', label: '包含'},
				{value: '9', label: '结束为'},
				{value: '10', label: '为空'}
			],
			whereForm: {},
			form: {
				runNumNo: "",
				flowTitle: "",
				createUser: "",
				createTime: "",
				queryRange: "",
				endTime: "",
				status: "",
				publicAttach: "",
				flowId: this.$route.query.flowId,
				queryType: "thml",
				whereListMapJson: "",
				resFieldsJson: "",
				search:""
			},
			filterMethod(query, item) {
				return item.label.indexOf(query) > -1;
			},
		}
	},
	mounted() {
		this.getBpmFormFieldsListForSelect();
	},
	methods: {
		closeTas() {
			useTabs.close()
		},
		queryBpmList() {
			this.form.whereListMapJson = this.getWhereList();
			this.$refs.table.upData(this.form)
		},
		fileDownload () {
			this.form.whereListMapJson = this.getWhereList();
			this.form.resFieldsJson = this.getResFields();
			if(this.form.resFieldsJson==='[]')
			{
				this.$alert("统计报表选项不能为空", "提示", {type: 'error'});
				return false;
			}else {
				this.$API.bpm.bpmFormData.queryExportBpmListExcel.fileDownload(this.form);
			}
		},
		switchBaseShow() {
			this.baseShow = !this.baseShow;
		},
		switchFieldShow() {
			this.fieldShow = !this.fieldShow;
		},
		switchReportShow() {
			this.reportShow = !this.reportShow;
		},
		readBpmDetails(row,index)
		{
			this.$nextTick(() => {
				this.$router.replace({
					path: '/bpm/handle/read',
					query: {
						runId: row.runId
					}
				})
			})
		},
		async getBpmFormFieldsListForSelect() {
			var res = await this.$API.bpm.bpmForm.getBpmFormFieldsListForSelect.get({flowId: this.form.flowId});
			if (res.code == 200) {
				this.fieldList = res.data;
				this.allFileList = res.data;
				this.allFileList.push({id:'id', label: '流水号'});
				this.allFileList.push({id:'runId', label: '唯一标识'});
				this.allFileList.push({id:'status', label: '流程状态'});
				this.allFileList.push({id:'createTime', label: '开始时间'});
				this.allFileList.push({id:'endTime', label: '结束时间'});
				this.fieldList.forEach(item => {
					this.fieldListOption.push({key: item.id, label: item.label});
					this.whereForm[item.id] = {opt: '', val: ''}
				})
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		getResFields() {
			var arr = [];
			this.selectedField.forEach(item=>{
				this.fieldList.forEach(item1=>{
					if(item===item1.id)
					{
						arr.push({fieldName:item1.id,title:item1.label});
					}
				})
			})
			return JSON.stringify(arr);
		},
		getWhereList() {
			var optArr = [];
			this.fieldList.forEach(item => {
				let json = {
					field: item.id,
					opt: this.whereForm[item.id].opt,
					value: this.whereForm[item.id].val
				}
				optArr.push(json);
			})
			return JSON.stringify(optArr);
		},
		async upsearch() {
			this.$refs.table.upData(this.search)
		},
	}
}
</script>
